﻿<template>
  <div class="weather-warning">
    <!-- 页面头部 -->
    <div class="page-header">
      <i class="el-icon-warning-outline header-icon"></i>
      <h1 class="page-title">气象预警信息</h1>
      <div class="header-controls">
        <el-cascader
          v-model="selectedRegion"
          :options="regionOptions"
          :props="cascaderProps"
          placeholder="请选择地区"
          @change="handleRegionChange"
          class="region-selector"
          clearable
        ></el-cascader>
        <el-button type="primary" class="refresh-btn" @click="refreshData">
          <i class="el-icon-refresh"></i>
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 天气概览 -->
    <div class="weather-overview">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="6">
          <div class="weather-card">
            <div class="card-header">
              <h3>当前天气</h3>
              <span class="location">{{ currentWeather.location }}</span>
            </div>
            <div class="weather-content">
              <i :class="currentWeather.icon" class="weather-icon"></i>
              <div class="weather-info">
                <div class="temperature">{{ currentWeather.temperature }}C</div>
                <div class="condition">{{ currentWeather.condition }}</div>
                <div class="details">
                  <div>湿度: {{ currentWeather.humidity }}%</div>
                  <div>风速: {{ currentWeather.windSpeed }}m/s</div>
                  <div>能见度: {{ currentWeather.visibility }}km</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6">
          <div class="weather-card">
            <div class="card-header">
              <h3>预警信息</h3>
            </div>
            <div class="warning-content">
              <i :class="getWarningIcon()" class="warning-icon"></i>
              <div class="warning-text">
                <div class="warning-title">{{ getWarningLevelText() }}</div>
                <div class="warning-desc">{{ warningInfo.description }}</div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6">
          <div class="weather-card">
            <div class="card-header">
              <h3>建议措施</h3>
            </div>
            <div class="suggestion-content">
              <i class="el-icon-lightbulb suggestion-icon"></i>
              <div class="suggestion-text">
                <div class="suggestion-title">安全建议</div>
                <div class="suggestion-desc">{{ suggestionInfo.title }}</div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :md="6">
          <div class="weather-card">
            <div class="card-header">
              <h3>未来预报</h3>
            </div>
            <div class="forecast-content">
              <div v-for="item in forecast" :key="item.date" class="forecast-item">
                <div class="forecast-date">{{ item.date }}</div>
                <i :class="item.icon" class="forecast-icon"></i>
                <div class="forecast-temp">{{ item.temperature }}</div>
                <div class="forecast-text">{{ item.condition }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 详细预警信息 -->
    <div class="detailed-warning">
      <el-card>
        <template #header>
          <div style="display: flex; justify-content: space-between; align-items: center;">
            <span>详细预警信息</span>
            <el-tag :type="getWarningTagType()" size="large">
              {{ getWarningLevelText() }}
            </el-tag>
          </div>
        </template>
        <div class="warning-detail-content">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="12">
              <div class="detail-section">
                <h4>影响范围</h4>
                <ul class="impact-list">
                  <li v-for="impact in warningInfo.impacts" :key="impact">
                    <i class="el-icon-location-outline"></i>
                    {{ impact }}
                  </li>
                </ul>
              </div>
            </el-col>
            <el-col :xs="24" :sm="12">
              <div class="detail-section">
                <h4>防护措施</h4>
                <ul class="measure-list">
                  <li v-for="measure in suggestionInfo.measures" :key="measure">
                    <i class="el-icon-check"></i>
                    {{ measure }}
                  </li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>

    <!-- 预警历史 -->
    <div class="warning-history">
      <el-card>
        <template #header>
          <span>预警历史记录</span>
        </template>
        <el-table :data="warningHistory" style="width: 100%">
          <el-table-column prop="date" label="日期" width="120"></el-table-column>
          <el-table-column prop="time" label="时间" width="100"></el-table-column>
          <el-table-column prop="level" label="预警等级" width="120">
            <template #default="scope">
              <el-tag :type="getHistoryTagType(scope.row.level)" size="small">
                {{ getHistoryLevelText(scope.row.level) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="type" label="预警类型" width="120"></el-table-column>
          <el-table-column prop="description" label="描述"></el-table-column>
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'" size="small">
                {{ scope.row.status === 'active' ? '生效中' : '已解除' }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>


<script setup lang="ts">
import { ref, onMounted } from "vue"
import { ElMessage } from "element-plus"

// 定义接口
interface WeatherData {
  location: string
  temperature: number
  condition: string
  humidity: number
  windSpeed: number
  visibility: number
  icon: string
}

interface WarningInfo {
  level: string
  description: string
  impacts: string[]
}

interface SuggestionInfo {
  title: string
  measures: string[]
}

interface ForecastItem {
  date: string
  temperature: string
  condition: string
  icon: string
}

interface WarningHistoryItem {
  date: string
  time: string
  level: string
  type: string
  description: string
  status: string
}

// 地区选择相关数据
const selectedRegion = ref<string[]>([])
const cascaderProps = {
  value: "code",
  label: "name",
  children: "children"
}

// 省市地区数据
const regionOptions = ref([
  {
    code: "110000",
    name: "北京市",
    children: [
      { code: "110100", name: "北京市" }
    ]
  },
  {
    code: "120000", 
    name: "天津市",
    children: [
      { code: "120100", name: "天津市" }
    ]
  },
  {
    code: "130000",
    name: "河北省", 
    children: [
      { code: "130100", name: "石家庄市" },
      { code: "130200", name: "唐山市" },
      { code: "130300", name: "秦皇岛市" },
      { code: "130400", name: "邯郸市" },
      { code: "130500", name: "邢台市" },
      { code: "130600", name: "保定市" },
      { code: "130700", name: "张家口市" },
      { code: "130800", name: "承德市" },
      { code: "130900", name: "沧州市" },
      { code: "131000", name: "廊坊市" },
      { code: "131100", name: "衡水市" }
    ]
  },
  {
    code: "140000",
    name: "山西省",
    children: [
      { code: "140100", name: "太原市" },
      { code: "140200", name: "大同市" },
      { code: "140300", name: "阳泉市" },
      { code: "140400", name: "长治市" },
      { code: "140500", name: "晋城市" },
      { code: "140600", name: "朔州市" },
      { code: "140700", name: "晋中市" },
      { code: "140800", name: "运城市" },
      { code: "140900", name: "忻州市" },
      { code: "141000", name: "临汾市" },
      { code: "141100", name: "吕梁市" }
    ]
  },
  {
    code: "150000",
    name: "内蒙古自治区",
    children: [
      { code: "150100", name: "呼和浩特市" },
      { code: "150200", name: "包头市" },
      { code: "150300", name: "乌海市" },
      { code: "150400", name: "赤峰市" },
      { code: "150500", name: "通辽市" },
      { code: "150600", name: "鄂尔多斯市" },
      { code: "150700", name: "呼伦贝尔市" },
      { code: "150800", name: "巴彦淖尔市" },
      { code: "150900", name: "乌兰察布市" },
      { code: "152200", name: "兴安盟" },
      { code: "152500", name: "锡林郭勒盟" },
      { code: "152900", name: "阿拉善盟" }
    ]
  },
  {
    code: "210000",
    name: "辽宁省",
    children: [
      { code: "210100", name: "沈阳市" },
      { code: "210200", name: "大连市" },
      { code: "210300", name: "鞍山市" },
      { code: "210400", name: "抚顺市" },
      { code: "210500", name: "本溪市" },
      { code: "210600", name: "丹东市" },
      { code: "210700", name: "锦州市" },
      { code: "210800", name: "营口市" },
      { code: "210900", name: "阜新市" },
      { code: "211000", name: "辽阳市" },
      { code: "211100", name: "盘锦市" },
      { code: "211200", name: "铁岭市" },
      { code: "211300", name: "朝阳市" },
      { code: "211400", name: "葫芦岛市" }
    ]
  },
  {
    code: "220000",
    name: "吉林省",
    children: [
      { code: "220100", name: "长春市" },
      { code: "220200", name: "吉林市" },
      { code: "220300", name: "四平市" },
      { code: "220400", name: "辽源市" },
      { code: "220500", name: "通化市" },
      { code: "220600", name: "白山市" },
      { code: "220700", name: "松原市" },
      { code: "220800", name: "白城市" },
      { code: "222400", name: "延边朝鲜族自治州" }
    ]
  },
  {
    code: "230000",
    name: "黑龙江省",
    children: [
      { code: "230100", name: "哈尔滨市" },
      { code: "230200", name: "齐齐哈尔市" },
      { code: "230300", name: "鸡西市" },
      { code: "230400", name: "鹤岗市" },
      { code: "230500", name: "双鸭山市" },
      { code: "230600", name: "大庆市" },
      { code: "230700", name: "伊春市" },
      { code: "230800", name: "佳木斯市" },
      { code: "230900", name: "七台河市" },
      { code: "231000", name: "牡丹江市" },
      { code: "231100", name: "黑河市" },
      { code: "231200", name: "绥化市" },
      { code: "232700", name: "大兴安岭地区" }
    ]
  },
  {
    code: "310000",
    name: "上海市",
    children: [
      { code: "310100", name: "上海市" }
    ]
  },
  {
    code: "320000",
    name: "江苏省",
    children: [
      { code: "320100", name: "南京市" },
      { code: "320200", name: "无锡市" },
      { code: "320300", name: "徐州市" },
      { code: "320400", name: "常州市" },
      { code: "320500", name: "苏州市" },
      { code: "320600", name: "南通市" },
      { code: "320700", name: "连云港市" },
      { code: "320800", name: "淮安市" },
      { code: "320900", name: "盐城市" },
      { code: "321000", name: "扬州市" },
      { code: "321100", name: "镇江市" },
      { code: "321200", name: "泰州市" },
      { code: "321300", name: "宿迁市" }
    ]
  },
  {
    code: "330000",
    name: "浙江省",
    children: [
      { code: "330100", name: "杭州市" },
      { code: "330200", name: "宁波市" },
      { code: "330300", name: "温州市" },
      { code: "330400", name: "嘉兴市" },
      { code: "330500", name: "湖州市" },
      { code: "330600", name: "绍兴市" },
      { code: "330700", name: "金华市" },
      { code: "330800", name: "衢州市" },
      { code: "330900", name: "舟山市" },
      { code: "331000", name: "台州市" },
      { code: "331100", name: "丽水市" }
    ]
  },
  {
    code: "340000",
    name: "安徽省",
    children: [
      { code: "340100", name: "合肥市" },
      { code: "340200", name: "芜湖市" },
      { code: "340300", name: "蚌埠市" },
      { code: "340400", name: "淮南市" },
      { code: "340500", name: "马鞍山市" },
      { code: "340600", name: "淮北市" },
      { code: "340700", name: "铜陵市" },
      { code: "340800", name: "安庆市" },
      { code: "341000", name: "黄山市" },
      { code: "341100", name: "滁州市" },
      { code: "341200", name: "阜阳市" },
      { code: "341300", name: "宿州市" },
      { code: "341500", name: "六安市" },
      { code: "341600", name: "亳州市" },
      { code: "341700", name: "池州市" },
      { code: "341800", name: "宣城市" }
    ]
  },
  {
    code: "350000",
    name: "福建省",
    children: [
      { code: "350100", name: "福州市" },
      { code: "350200", name: "厦门市" },
      { code: "350300", name: "莆田市" },
      { code: "350400", name: "三明市" },
      { code: "350500", name: "泉州市" },
      { code: "350600", name: "漳州市" },
      { code: "350700", name: "南平市" },
      { code: "350800", name: "龙岩市" },
      { code: "350900", name: "宁德市" }
    ]
  },
  {
    code: "360000",
    name: "江西省",
    children: [
      { code: "360100", name: "南昌市" },
      { code: "360200", name: "景德镇市" },
      { code: "360300", name: "萍乡市" },
      { code: "360400", name: "九江市" },
      { code: "360500", name: "新余市" },
      { code: "360600", name: "鹰潭市" },
      { code: "360700", name: "赣州市" },
      { code: "360800", name: "吉安市" },
      { code: "360900", name: "宜春市" },
      { code: "361000", name: "抚州市" },
      { code: "361100", name: "上饶市" }
    ]
  },
  {
    code: "370000",
    name: "山东省",
    children: [
      { code: "370100", name: "济南市" },
      { code: "370200", name: "青岛市" },
      { code: "370300", name: "淄博市" },
      { code: "370400", name: "枣庄市" },
      { code: "370500", name: "东营市" },
      { code: "370600", name: "烟台市" },
      { code: "370700", name: "潍坊市" },
      { code: "370800", name: "济宁市" },
      { code: "370900", name: "泰安市" },
      { code: "371000", name: "威海市" },
      { code: "371100", name: "日照市" },
      { code: "371200", name: "莱芜市" },
      { code: "371300", name: "临沂市" },
      { code: "371400", name: "德州市" },
      { code: "371500", name: "聊城市" },
      { code: "371600", name: "滨州市" },
      { code: "371700", name: "菏泽市" }
    ]
  },
  {
    code: "410000",
    name: "河南省",
    children: [
      { code: "410100", name: "郑州市" },
      { code: "410200", name: "开封市" },
      { code: "410300", name: "洛阳市" },
      { code: "410400", name: "平顶山市" },
      { code: "410500", name: "安阳市" },
      { code: "410600", name: "鹤壁市" },
      { code: "410700", name: "新乡市" },
      { code: "410800", name: "焦作市" },
      { code: "410900", name: "濮阳市" },
      { code: "411000", name: "许昌市" },
      { code: "411100", name: "漯河市" },
      { code: "411200", name: "三门峡市" },
      { code: "411300", name: "南阳市" },
      { code: "411400", name: "商丘市" },
      { code: "411500", name: "信阳市" },
      { code: "411600", name: "周口市" },
      { code: "411700", name: "驻马店市" },
      { code: "419001", name: "济源市" }
    ]
  },
  {
    code: "420000",
    name: "湖北省",
    children: [
      { code: "420100", name: "武汉市" },
      { code: "420200", name: "黄石市" },
      { code: "420300", name: "十堰市" },
      { code: "420500", name: "宜昌市" },
      { code: "420600", name: "襄阳市" },
      { code: "420700", name: "鄂州市" },
      { code: "420800", name: "荆门市" },
      { code: "420900", name: "孝感市" },
      { code: "421000", name: "荆州市" },
      { code: "421100", name: "黄冈市" },
      { code: "421200", name: "咸宁市" },
      { code: "421300", name: "随州市" },
      { code: "422800", name: "恩施土家族苗族自治州" },
      { code: "429004", name: "仙桃市" },
      { code: "429005", name: "潜江市" },
      { code: "429006", name: "天门市" },
      { code: "429021", name: "神农架林区" }
    ]
  },
  {
    code: "430000",
    name: "湖南省",
    children: [
      { code: "430100", name: "长沙市" },
      { code: "430200", name: "株洲市" },
      { code: "430300", name: "湘潭市" },
      { code: "430400", name: "衡阳市" },
      { code: "430500", name: "邵阳市" },
      { code: "430600", name: "岳阳市" },
      { code: "430700", name: "常德市" },
      { code: "430800", name: "张家界市" },
      { code: "430900", name: "益阳市" },
      { code: "431000", name: "郴州市" },
      { code: "431100", name: "永州市" },
      { code: "431200", name: "怀化市" },
      { code: "431300", name: "娄底市" },
      { code: "433100", name: "湘西土家族苗族自治州" }
    ]
  },
  {
    code: "440000",
    name: "广东省",
    children: [
      { code: "440100", name: "广州市" },
      { code: "440200", name: "韶关市" },
      { code: "440300", name: "深圳市" },
      { code: "440400", name: "珠海市" },
      { code: "440500", name: "汕头市" },
      { code: "440600", name: "佛山市" },
      { code: "440700", name: "江门市" },
      { code: "440800", name: "湛江市" },
      { code: "440900", name: "茂名市" },
      { code: "441200", name: "肇庆市" },
      { code: "441300", name: "惠州市" },
      { code: "441400", name: "梅州市" },
      { code: "441500", name: "汕尾市" },
      { code: "441600", name: "河源市" },
      { code: "441700", name: "阳江市" },
      { code: "441800", name: "清远市" },
      { code: "441900", name: "东莞市" },
      { code: "442000", name: "中山市" },
      { code: "445100", name: "潮州市" },
      { code: "445200", name: "揭阳市" },
      { code: "445300", name: "云浮市" }
    ]
  },
  {
    code: "450000",
    name: "广西壮族自治区",
    children: [
      { code: "450100", name: "南宁市" },
      { code: "450200", name: "柳州市" },
      { code: "450300", name: "桂林市" },
      { code: "450400", name: "梧州市" },
      { code: "450500", name: "北海市" },
      { code: "450600", name: "防城港市" },
      { code: "450700", name: "钦州市" },
      { code: "450800", name: "贵港市" },
      { code: "450900", name: "玉林市" },
      { code: "451000", name: "百色市" },
      { code: "451100", name: "贺州市" },
      { code: "451200", name: "河池市" },
      { code: "451300", name: "来宾市" },
      { code: "451400", name: "崇左市" }
    ]
  },
  {
    code: "460000",
    name: "海南省",
    children: [
      { code: "460100", name: "海口市" },
      { code: "460200", name: "三亚市" },
      { code: "460300", name: "三沙市" },
      { code: "460400", name: "儋州市" },
      { code: "469001", name: "五指山市" },
      { code: "469002", name: "琼海市" },
      { code: "469005", name: "文昌市" },
      { code: "469006", name: "万宁市" },
      { code: "469007", name: "东方市" },
      { code: "469021", name: "定安县" },
      { code: "469022", name: "屯昌县" },
      { code: "469023", name: "澄迈县" },
      { code: "469024", name: "临高县" },
      { code: "469025", name: "白沙黎族自治县" },
      { code: "469026", name: "昌江黎族自治县" },
      { code: "469027", name: "乐东黎族自治县" },
      { code: "469028", name: "陵水黎族自治县" },
      { code: "469029", name: "保亭黎族苗族自治县" },
      { code: "469030", name: "琼中黎族苗族自治县" }
    ]
  },
  {
    code: "500000",
    name: "重庆市",
    children: [
      { code: "500100", name: "重庆市" }
    ]
  },
  {
    code: "510000",
    name: "四川省",
    children: [
      { code: "510100", name: "成都市" },
      { code: "510300", name: "自贡市" },
      { code: "510400", name: "攀枝花市" },
      { code: "510500", name: "泸州市" },
      { code: "510600", name: "德阳市" },
      { code: "510700", name: "绵阳市" },
      { code: "510800", name: "广元市" },
      { code: "510900", name: "遂宁市" },
      { code: "511000", name: "内江市" },
      { code: "511100", name: "乐山市" },
      { code: "511300", name: "南充市" },
      { code: "511400", name: "眉山市" },
      { code: "511500", name: "宜宾市" },
      { code: "511600", name: "广安市" },
      { code: "511700", name: "达州市" },
      { code: "511800", name: "雅安市" },
      { code: "511900", name: "巴中市" },
      { code: "512000", name: "资阳市" },
      { code: "513200", name: "阿坝藏族羌族自治州" },
      { code: "513300", name: "甘孜藏族自治州" },
      { code: "513400", name: "凉山彝族自治州" }
    ]
  },
  {
    code: "520000",
    name: "贵州省",
    children: [
      { code: "520100", name: "贵阳市" },
      { code: "520200", name: "六盘水市" },
      { code: "520300", name: "遵义市" },
      { code: "520400", name: "安顺市" },
      { code: "520500", name: "毕节市" },
      { code: "520600", name: "铜仁市" },
      { code: "522300", name: "黔西南布依族苗族自治州" },
      { code: "522600", name: "黔东南苗族侗族自治州" },
      { code: "522700", name: "黔南布依族苗族自治州" }
    ]
  },
  {
    code: "530000",
    name: "云南省",
    children: [
      { code: "530100", name: "昆明市" },
      { code: "530300", name: "曲靖市" },
      { code: "530400", name: "玉溪市" },
      { code: "530500", name: "保山市" },
      { code: "530600", name: "昭通市" },
      { code: "530700", name: "丽江市" },
      { code: "530800", name: "普洱市" },
      { code: "530900", name: "临沧市" },
      { code: "532300", name: "楚雄彝族自治州" },
      { code: "532500", name: "红河哈尼族彝族自治州" },
      { code: "532600", name: "文山壮族苗族自治州" },
      { code: "532800", name: "西双版纳傣族自治州" },
      { code: "532900", name: "大理白族自治州" },
      { code: "533100", name: "德宏傣族景颇族自治州" },
      { code: "533300", name: "怒江傈僳族自治州" },
      { code: "533400", name: "迪庆藏族自治州" }
    ]
  },
  {
    code: "540000",
    name: "西藏自治区",
    children: [
      { code: "540100", name: "拉萨市" },
      { code: "540200", name: "日喀则市" },
      { code: "540300", name: "昌都市" },
      { code: "540400", name: "林芝市" },
      { code: "540500", name: "山南市" },
      { code: "540600", name: "那曲市" },
      { code: "542500", name: "阿里地区" }
    ]
  },
  {
    code: "610000",
    name: "陕西省",
    children: [
      { code: "610100", name: "西安市" },
      { code: "610200", name: "铜川市" },
      { code: "610300", name: "宝鸡市" },
      { code: "610400", name: "咸阳市" },
      { code: "610500", name: "渭南市" },
      { code: "610600", name: "延安市" },
      { code: "610700", name: "汉中市" },
      { code: "610800", name: "榆林市" },
      { code: "610900", name: "安康市" },
      { code: "611000", name: "商洛市" }
    ]
  },
  {
    code: "620000",
    name: "甘肃省",
    children: [
      { code: "620100", name: "兰州市" },
      { code: "620200", name: "嘉峪关市" },
      { code: "620300", name: "金昌市" },
      { code: "620400", name: "白银市" },
      { code: "620500", name: "天水市" },
      { code: "620600", name: "武威市" },
      { code: "620700", name: "张掖市" },
      { code: "620800", name: "平凉市" },
      { code: "620900", name: "庆阳市" },
      { code: "621000", name: "定西市" },
      { code: "621100", name: "陇南市" },
      { code: "621200", name: "临夏回族自治州" },
      { code: "622900", name: "甘南藏族自治州" }
    ]
  },
  {
    code: "630000",
    name: "青海省",
    children: [
      { code: "630100", name: "西宁市" },
      { code: "630200", name: "海东市" },
      { code: "632200", name: "海北藏族自治州" },
      { code: "632300", name: "黄南藏族自治州" },
      { code: "632500", name: "海南藏族自治州" },
      { code: "632600", name: "果洛藏族自治州" },
      { code: "632700", name: "玉树藏族自治州" },
      { code: "632800", name: "海西蒙古族藏族自治州" }
    ]
  },
  {
    code: "640000",
    name: "宁夏回族自治区",
    children: [
      { code: "640100", name: "银川市" },
      { code: "640200", name: "石嘴山市" },
      { code: "640300", name: "吴忠市" },
      { code: "640400", name: "固原市" },
      { code: "640500", name: "中卫市" }
    ]
  },
  {
    code: "650000",
    name: "新疆维吾尔自治区",
    children: [
      { code: "650100", name: "乌鲁木齐市" },
      { code: "650200", name: "克拉玛依市" },
      { code: "650400", name: "吐鲁番市" },
      { code: "650500", name: "哈密市" },
      { code: "652300", name: "昌吉回族自治州" },
      { code: "652700", name: "博尔塔拉蒙古自治州" },
      { code: "652800", name: "巴音郭楞蒙古自治州" },
      { code: "652900", name: "阿克苏地区" },
      { code: "653000", name: "克孜勒苏柯尔克孜自治州" },
      { code: "653100", name: "喀什地区" },
      { code: "653200", name: "和田地区" },
      { code: "654000", name: "伊犁哈萨克自治州" },
      { code: "654200", name: "塔城地区" },
      { code: "654300", name: "阿勒泰地区" },
      { code: "659001", name: "石河子市" },
      { code: "659002", name: "阿拉尔市" },
      { code: "659003", name: "图木舒克市" },
      { code: "659004", name: "五家渠市" },
      { code: "659005", name: "北屯市" },
      { code: "659006", name: "铁门关市" },
      { code: "659007", name: "双河市" },
      { code: "659008", name: "可克达拉市" },
      { code: "659009", name: "昆玉市" },
      { code: "659010", name: "胡杨河市" }
    ]
  }
])

// 响应式数据
const currentWeather = ref<WeatherData>({
  location: "北京市",
  temperature: 25,
  condition: "多云",
  humidity: 65,
  windSpeed: 3.2,
  visibility: 10,
  icon: "el-icon-cloudy"
})

const warningLevel = ref<string>("high")
const warningInfo = ref<WarningInfo>({
  level: "high",
  description: "预计未来6小时内将出现强降雨天气，降雨量可能达到50-80毫米，请做好防范准备。",
  impacts: [
    "道路积水风险增加",
    "能见度降低影响交通",
    "山区地质灾害风险",
    "城市内涝可能性增大"
  ]
})

const suggestionInfo = ref<SuggestionInfo>({
  title: "请密切关注天气变化，做好防护措施",
  measures: [
    "避免在低洼地区停留",
    "减少户外活动",
    "检查排水设施",
    "准备应急物资",
    "关注官方预警信息"
  ]
})

const forecast = ref<ForecastItem[]>([
  { date: "今天", temperature: "25C", condition: "多云", icon: "el-icon-cloudy" },
  { date: "明天", temperature: "22C", condition: "小雨", icon: "el-icon-light-rain" },
  { date: "后天", temperature: "20C", condition: "中雨", icon: "el-icon-heavy-rain" },
  { date: "周三", temperature: "18C", condition: "大雨", icon: "el-icon-heavy-rain" }
])

const warningHistory = ref<WarningHistoryItem[]>([
  {
    date: "2024-01-15",
    time: "08:00",
    level: "high",
    type: "暴雨预警",
    description: "预计未来6小时内将出现强降雨",
    status: "active"
  },
  {
    date: "2024-01-14",
    time: "14:30",
    level: "medium",
    type: "大风预警",
    description: "预计未来3小时内将出现6-7级大风",
    status: "inactive"
  },
  {
    date: "2024-01-13",
    time: "10:15",
    level: "low",
    type: "雾霾预警",
    description: "预计未来12小时内将出现轻度雾霾",
    status: "inactive"
  }
])

// 获取预警等级文本
const getWarningLevelText = () => {
  switch (warningLevel.value) {
    case "high": return "红色预警"
    case "medium": return "橙色预警"
    case "low": return "黄色预警"
    default: return "未知"
  }
}

// 获取预警等级样式类
const getWarningLevelClass = () => {
  return `warning-${warningLevel.value}`
}

// 获取预警图标
const getWarningIcon = () => {
  switch (warningLevel.value) {
    case "high": return "icon-warning-high"
    case "medium": return "icon-warning-medium"
    case "low": return "icon-warning-low"
    default: return "icon-warning-unknown"
  }
}

// 获取预警标签类型
const getWarningTagType = () => {
  switch (warningLevel.value) {
    case "high": return "danger"
    case "medium": return "warning"
    case "low": return "info"
    default: return "info"
  }
}

// 获取历史记录标签类型
const getHistoryTagType = (level: string) => {
  switch (level) {
    case "high": return "danger"
    case "medium": return "warning"
    case "low": return "info"
    default: return "info"
  }
}

// 获取历史记录等级文本
const getHistoryLevelText = (level: string) => {
  switch (level) {
    case "high": return "红色预警"
    case "medium": return "橙色预警"
    case "low": return "黄色预警"
    default: return "未知"
  }
}

// 处理地区切换
const handleRegionChange = (value: string[]) => {
  if (value && value.length > 0) {
    const cityCode = value[value.length - 1]
    const cityName = getCityNameByCode(cityCode)
    
    // 更新当前天气位置
    currentWeather.value.location = cityName
    
    // 模拟根据地区获取天气数据
    loadWeatherDataByRegion(cityCode, cityName)
    
    ElMessage.success(`已切换到${cityName}地区`)
  }
}

// 根据城市代码获取城市名称
const getCityNameByCode = (code: string): string => {
  for (const province of regionOptions.value) {
    if (province.children) {
      for (const city of province.children) {
        if (city.code === code) {
          return city.name
        }
      }
    }
  }
  return "未知地区"
}

// 根据地区加载天气数据
const loadWeatherDataByRegion = (cityCode: string, cityName: string) => {
  // 模拟不同地区的天气数据
  const weatherDataMap: Record<string, Partial<WeatherData>> = {
    "110100": { temperature: 25, condition: "多云", humidity: 65, windSpeed: 3.2, visibility: 10, icon: "el-icon-cloudy" },
    "120100": { temperature: 23, condition: "晴", humidity: 70, windSpeed: 2.8, visibility: 15, icon: "el-icon-sunny" },
    "130100": { temperature: 28, condition: "小雨", humidity: 80, windSpeed: 4.1, visibility: 8, icon: "el-icon-light-rain" },
    "310100": { temperature: 26, condition: "阴", humidity: 75, windSpeed: 3.5, visibility: 12, icon: "el-icon-cloudy-and-sunny" },
    "320100": { temperature: 24, condition: "多云", humidity: 68, windSpeed: 2.9, visibility: 14, icon: "el-icon-cloudy" },
    "330100": { temperature: 27, condition: "晴", humidity: 72, windSpeed: 3.8, visibility: 16, icon: "el-icon-sunny" },
    "440100": { temperature: 30, condition: "雷阵雨", humidity: 85, windSpeed: 5.2, visibility: 6, icon: "el-icon-heavy-rain" },
    "440300": { temperature: 29, condition: "多云", humidity: 78, windSpeed: 4.5, visibility: 11, icon: "el-icon-cloudy" },
    "510100": { temperature: 22, condition: "雾", humidity: 90, windSpeed: 1.8, visibility: 3, icon: "el-icon-fog" },
    "610100": { temperature: 20, condition: "雪", humidity: 60, windSpeed: 2.5, visibility: 5, icon: "el-icon-snow" }
  }
  
  const weatherData = weatherDataMap[cityCode]
  if (weatherData) {
    Object.assign(currentWeather.value, weatherData)
  }
  
  // 模拟不同地区的预警信息
  updateWarningByRegion(cityName)
}

// 根据地区更新预警信息
const updateWarningByRegion = (cityName: string) => {
  const warningMap: Record<string, Partial<WarningInfo>> = {
    "北京市": { 
      level: "high", 
      description: "预计未来6小时内将出现强降雨天气，降雨量可能达到50-80毫米，请做好防范准备。",
      impacts: ["道路积水风险增加", "能见度降低影响交通", "山区地质灾害风险", "城市内涝可能性增大"]
    },
    "上海市": { 
      level: "medium", 
      description: "预计未来3小时内将出现6-7级大风，请注意高空作业安全。",
      impacts: ["高空作业风险增加", "户外广告牌安全隐患", "海上作业风险", "交通出行受影响"]
    },
    "广州市": { 
      level: "high", 
      description: "预计未来12小时内将出现强对流天气，伴有雷电、短时强降水。",
      impacts: ["雷电灾害风险", "短时强降水", "城市内涝", "交通出行受阻"]
    },
    "深圳市": { 
      level: "medium", 
      description: "预计未来6小时内将出现大雾天气，能见度低于500米。",
      impacts: ["能见度降低", "交通出行受阻", "航班延误风险", "海上作业受限"]
    },
    "成都市": { 
      level: "low", 
      description: "预计未来24小时内将出现轻度雾霾天气，空气质量轻度污染。",
      impacts: ["空气质量下降", "呼吸道疾病风险", "能见度略有降低", "户外运动受限"]
    },
    "西安市": { 
      level: "medium", 
      description: "预计未来12小时内将出现降雪天气，积雪深度可能达到5-10厘米。",
      impacts: ["道路结冰风险", "交通出行受阻", "供暖需求增加", "户外作业受限"]
    }
  }
  
  const warningData = warningMap[cityName]
  if (warningData) {
    Object.assign(warningInfo.value, warningData)
    warningLevel.value = warningData.level || "low"
  }
  
  // 更新建议措施
  updateSuggestionByRegion(cityName)
}

// 根据地区更新建议措施
const updateSuggestionByRegion = (cityName: string) => {
  const suggestionMap: Record<string, Partial<SuggestionInfo>> = {
    "北京市": {
      title: "请密切关注天气变化，做好防护措施",
      measures: ["避免在低洼地区停留", "减少户外活动", "检查排水设施", "准备应急物资", "关注官方预警信息"]
    },
    "上海市": {
      title: "请注意大风天气安全防护",
      measures: ["停止高空作业", "加固户外设施", "避免在广告牌下停留", "海上作业暂停", "注意交通安全"]
    },
    "广州市": {
      title: "请做好强对流天气防护",
      measures: ["避免雷雨时外出", "关闭门窗", "拔掉电器插头", "避免使用手机", "准备雨具"]
    },
    "深圳市": {
      title: "请注意大雾天气出行安全",
      measures: ["减速慢行", "开启雾灯", "保持安全距离", "避免急刹车", "关注航班信息"]
    },
    "成都市": {
      title: "请注意雾霾天气健康防护",
      measures: ["减少户外活动", "佩戴口罩", "关闭门窗", "使用空气净化器", "多喝水"]
    },
    "西安市": {
      title: "请注意降雪天气出行安全",
      measures: ["减速慢行", "安装防滑链", "保持安全距离", "注意保暖", "关注路况信息"]
    }
  }
  
  const suggestionData = suggestionMap[cityName]
  if (suggestionData) {
    Object.assign(suggestionInfo.value, suggestionData)
  }
}

// 刷新数据
const refreshData = () => {
  ElMessage.success("数据已刷新")
  // 这里可以添加实际的数据刷新逻辑
  if (selectedRegion.value && selectedRegion.value.length > 0) {
    const cityCode = selectedRegion.value[selectedRegion.value.length - 1]
    const cityName = getCityNameByCode(cityCode)
    loadWeatherDataByRegion(cityCode, cityName)
  }
}

// 组件挂载时初始化
onMounted(() => {
  console.log("气象预警页面已加载")
})
</script>


<style scoped>
.weather-warning {
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.page-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.header-icon {
  font-size: 32px;
  margin-right: 15px;
}

.page-title {
  flex: 1;
  margin: 0;
  color: #2c3e50;
  font-size: 28px;
  font-weight: 600;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-left: auto;
}

.region-selector {
  min-width: 200px;
}

.refresh-btn {
  margin-left: 0;
}

.weather-overview {
  margin-bottom: 30px;
}

.weather-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.weather-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid #f0f0f0;
}

.card-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}

.location {
  color: #7f8c8d;
  font-size: 14px;
}

.weather-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.weather-icon {
  font-size: 48px;
  color: #3498db;
}

.weather-info {
  flex: 1;
}

.temperature {
  font-size: 36px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 5px;
}

.condition {
  font-size: 16px;
  color: #7f8c8d;
  margin-bottom: 10px;
}

.details {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 14px;
  color: #95a5a6;
}

.warning-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.warning-icon {
  font-size: 48px;
  color: #e74c3c;
}

.warning-text {
  flex: 1;
}

.warning-title {
  font-size: 20px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 8px;
}

.warning-desc {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
}

.suggestion-content {
  display: flex;
  align-items: center;
  gap: 20px;
}

.suggestion-icon {
  font-size: 48px;
  color: #27ae60;
}

.suggestion-text {
  flex: 1;
}

.suggestion-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 8px;
}

.suggestion-desc {
  font-size: 14px;
  color: #7f8c8d;
  line-height: 1.5;
}

.forecast-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.forecast-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px;
  background: rgba(240, 240, 240, 0.5);
  border-radius: 10px;
}

.forecast-date {
  font-weight: bold;
  color: #2c3e50;
  min-width: 50px;
}

.forecast-icon {
  font-size: 24px;
  color: #3498db;
}

.forecast-temp {
  font-weight: bold;
  color: #2c3e50;
  min-width: 80px;
}

.forecast-text {
  color: #7f8c8d;
  font-size: 14px;
}

.detailed-warning {
  margin-bottom: 30px;
}

.warning-detail-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.warning-detail-content {
  padding: 20px 0;
}

.detail-section h4 {
  color: #2c3e50;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.impact-list,
.measure-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.impact-list li,
.measure-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.impact-list li:last-child,
.measure-list li:last-child {
  border-bottom: none;
}

.impact-list li i,
.measure-list li i {
  color: #3498db;
  font-size: 16px;
}

.warning-history {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .weather-warning {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
  
  .header-controls {
    flex-direction: column;
    gap: 10px;
    width: 100%;
  }
  
  .region-selector {
    min-width: 100%;
  }
  
  .page-title {
    font-size: 24px;
  }
  
  .weather-content,
  .warning-content,
  .suggestion-content {
    flex-direction: column;
    text-align: center;
  }
  
  .forecast-item {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
  
  .temperature {
    font-size: 28px;
  }
  
  .weather-icon,
  .warning-icon,
  .suggestion-icon {
    font-size: 36px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.weather-card {
  animation: fadeInUp 0.6s ease-out;
}

.weather-card:nth-child(1) { animation-delay: 0.1s; }
.weather-card:nth-child(2) { animation-delay: 0.2s; }
.weather-card:nth-child(3) { animation-delay: 0.3s; }
.weather-card:nth-child(4) { animation-delay: 0.4s; }

/* Element Plus 样式覆盖 */
:deep(.el-card) {
  border: none;
  box-shadow: none;
}

:deep(.el-card__header) {
  background: transparent;
  border-bottom: 2px solid #f0f0f0;
  padding: 20px 20px 15px;
}

:deep(.el-card__body) {
  padding: 20px;
}

:deep(.el-table) {
  background: transparent;
}

:deep(.el-table th) {
  background: rgba(240, 240, 240, 0.5);
  color: #2c3e50;
  font-weight: 600;
}

:deep(.el-table td) {
  border-bottom: 1px solid rgba(240, 240, 240, 0.5);
}

:deep(.el-table__row:hover) {
  background: rgba(240, 240, 240, 0.3);
}

:deep(.el-tag) {
  border: none;
  font-weight: 600;
}

:deep(.el-button) {
  border-radius: 8px;
  font-weight: 500;
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
}

:deep(.el-button--primary:hover) {
  background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

:deep(.el-cascader) {
  width: 100%;
}

:deep(.el-cascader .el-input) {
  border-radius: 8px;
}

:deep(.el-cascader .el-input__inner) {
  border-radius: 8px;
  border: 1px solid #dcdfe6;
  transition: border-color 0.3s ease;
}

:deep(.el-cascader .el-input__inner:focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

:deep(.el-cascader-panel) {
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

:deep(.el-cascader-menu) {
  border-radius: 8px;
}

:deep(.el-cascader-node) {
  border-radius: 4px;
  margin: 2px 4px;
}

:deep(.el-cascader-node:hover) {
  background: rgba(102, 126, 234, 0.1);
}

:deep(.el-cascader-node.is-selectable.in-active-path) {
  background: rgba(102, 126, 234, 0.2);
}
</style>






